:root {
    --secondary-color: #adadad;
    --cta-primary-color: white;
    --cta-secondary-color: black;
    --cta-primary-background-color: #f78e00;
    --cta-secondary-background-color: #96d4e9;
    --primary-nav-color: #f8f8f8;
}

*,
:after,
:before {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-family: RedHatText,"Red Hat Text",Overpass,Overpass,"Helvetica Neue",Arial,sans-serif;
    /* I haven't figured out where the offending element is, hack it for now */
    overflow: auto;
}

body {
    color: #475058;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

#overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.small {
    font-size: 85%;
}

/* responsive view */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .container h2,
    footer h2 {
        padding-left: 2.25rem;
    }

    .container h2:before,
    footer h2:before {
        left: 1rem;
    }

    ul {
        padding-left: 2rem;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
}

/* tablets (portrait and landscape) ----------- */
@media only screen and (max-width: 1023px) {
}

/* Tablets and potentially laptops */
@media screen and (max-device-width: 1024px) {
}

/* larger laptops and iPad Pro */
@media only screen and (min-device-width: 1300px) {
}

/* large screens */
@media only screen and (min-width: 1301px) {
}

@media only screen and (min-width: 1440px) {
}

/* 4k */
@media only screen and (min-width: 2560px) {
}

/* tablets (landscape) ----------- */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
}

/* tablets (portrait) ----------- */
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    /* Styles */
}

img {
    max-width: 100%;
}

/* Footer ends */

@import "layout.css";
@import "card.css";
@import "video-playlist.css";
@import "quote.css";
@import "button.css";
@import "carousel.css";
